<!DOCTYPE HTML>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="my.css">
  <meta charset="utf-8">
</head>

<body>

  <ul>
    <li>수정하게 될 div를 클릭하세요.</li>
    <li>Enter를 누르거나 blur 이벤트가 발생하게 해 결과를 저장하세요.</li>
  </ul>

  HTML을 적어도 좋습니다.

  <div id="view" class="view">Text</div>

  <script>
    let area = null;
    let view = document.getElementById('view');

    view.onclick = function() {
      editStart();
    };

    function editStart() {
      area = document.createElement('textarea');
      area.className = 'edit';
      area.value = view.innerHTML;

      area.onkeydown = function(event) {
        if (event.key == 'Enter') {
          this.blur();
        }
      };

      area.onblur = function() {
        editEnd();
      };

      view.replaceWith(area);
      area.focus();
    }

    function editEnd() {
      view.innerHTML = area.value;
      area.replaceWith(view);
    }
  </script>

</body>
</html>
